<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="item">
    <img :src="img" alt="">
    <div class="mask">
      <p>{{ title }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string
  img: string
}>()
</script>

<style scoped lang="scss">
.item {
  position: relative;
  width: 250px;
  height: 140px;
  border-radius: 15px;
  background-color: aliceblue;
  overflow: hidden;
  margin: 0 5px;
  margin-bottom: 10px;

  img {

    width: 100%;
    height: 100%;
    transition: 1s;

    &:hover {
      transform: rotate(6deg) scale(1.2);
    }

  }

  .mask {
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: 0;
    background-color: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px) saturate(1.25);
    z-index: 999;

    p {
      line-height: 40px;
      text-align: center
    }
  }

  &:hover p {
    color: bisque;
  }
}
</style>